import { _decorator, Component, EditBox, Node, Slider, Toggle, ToggleContainer, log, Label } from 'cc';
import { UIComponent } from '../../../platform/ui/UIComponent';
import { bind, bindValue } from '../../../platform/ui/UIDecorator';
const { ccclass, property } = _decorator;

@ccclass('BindTest')
export class BindTest extends UIComponent {
    
    // 双向绑定示例 - 明确指定节点名称
    @bindValue(EditBox, "&EditBox")
    private editBoxValue: string = "初始值";
    
    // 自动查找以&sliderValue或sliderValue命名的节点
    @bindValue(Slider,"&Slider")
    private sliderValue: number = 0.3;
    
    @bindValue(Toggle,"&Toggle")
    private toggleValue: boolean = false;
    
    @bindValue(ToggleContainer,"&ToggleGroup")
    private toggleGroupValue: number = 0;

    @bind(ToggleContainer)
    private ToggleGroup: ToggleContainer = null;
    @bindValue(Label,"&Label")
    private labbelValue: string = "";

    protected start(): void {
        log("==== BindTest 开始 ====");
        // log("初始绑定值:", this.getCurrentValues());
        
        // 使用setTimeout在下一帧执行，确保所有绑定都已建立完成
        // this.testSetValues();
        
        // 2秒后再次更新值，确保持续有效
        setTimeout(() => {
            log("\n--- 2秒后更新值测试 ---");
            // this.editBoxValue = "222秒后更新";
            // this.sliderValue = 0.7;
            // this.toggleValue = true;
            this.toggleGroupValue = 1;
            this.labbelValue = "ddd"
            log("更新后的值:", this.getCurrentValues());
        }, 3000);
        // this.ToggleGroup.node.on("toggle-changed", () => {})
        // 4秒后测试重新绑定
        // setTimeout(() => {
        //     log("\n--- 4秒后测试重新绑定 ---");
        //     this.rebindAll();
        //     log("重新绑定后的值:", this.getCurrentValues());
        // }, 4000);
    }
    
    // 立即测试设置值
    private testSetValues(): void {
        log("\n--- 测试设置值 ---");
        
        // 检查组件引用是否存在
        const componentStatus = {
            editBoxComponent: !!this["_editBoxValueComponent"],
            sliderComponent: !!this["_sliderValueComponent"],
            toggleComponent: !!this["_toggleValueComponent"],
            toggleGroupComponent: !!this["_toggleGroupValueComponent"]
        };
        log("组件引用检查:", componentStatus);
        
        // 如果所有组件引用都存在，执行值更新
        if (componentStatus.editBoxComponent && componentStatus.sliderComponent && 
            componentStatus.toggleComponent && componentStatus.toggleGroupComponent) {
            
            // 显式设置值，应该触发UI更新
            this.editBoxValue = "立即更新";
            this.sliderValue = 0.5;
            
            // 验证值是否正确设置
            log("设置后的值:", this.getCurrentValues());
            log("UI组件应该已更新");
        } 
    }
    
    /**
     * editBoxValue值变化时的回调
     */
    private onEditBoxValueChange(oldValue: string, newValue: string): void {
        log("EditBox值变化:", { oldValue, newValue });
    }
    
    /**
     * sliderValue值变化时的回调
     */
    private onSliderValueChange(oldValue: number, newValue: number): void {
        log("Slider值变化:", { oldValue, newValue });
    }
    
    /**
     * toggleValue值变化时的回调
     */
    private onToggleValueChange(oldValue: boolean, newValue: boolean): void {
        log("Toggle值变化:", { oldValue, newValue });
    }
    
    /**
     * toggleGroupValue值变化时的回调
     */
    private onToggleGroupValueChange(oldValue: number, newValue: number): void {
        log("ToggleGroup值变化:", { oldValue, newValue });
    }
    

    
    /**
     * 获取当前所有绑定的值
     */
    public getCurrentValues(): object {
        return {
            editBoxValue: this.editBoxValue,
            sliderValue: this.sliderValue,
            toggleValue: this.toggleValue,
            toggleGroupValue: this.toggleGroupValue
        };
    }
}


